@mixin top {
    margin-top: 40px;
}

@mixin flex($direction:column,$inline:block) {
    display: if($inline==block,flex,inline-flex);
    flex-direction: $direction;
    flex-wrap: wrap;
}

@mixin panel($height:112px,$bgcolor:#f3f3f3,$margin:20px) {
    background-color: $bgcolor;
    margin-top: $margin;
    height: $height;
    border-radius: 9px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

@mixin circle($width,$bgcolor:#fff,$top:1px) {
    width: $width;
    height: $width;
    background-color: $bgcolor;
    margin: $top auto;
    border-radius: 50%;
    overflow: hidden;
}

@mixin translucence($height) {
    @include panel($height);
    width: 95%;
    position: relative;
    top: -35px;
    left: 9px;
    background: linear-gradient(rgba(255, 255, 255, 0.6), #f1f1f1);
}